
<template>
  <basic-container>
    <div class="title">{{ currentTableName }}</div>
    <div>
      <el-button
        :disabled="loading"
        v-for="table in tableOptions"
        :key="table.verfiyConfirmFlag"
        :type="currentTable === table.verfiyConfirmFlag ? 'primary' : undefined"
        class="table-opt"
        @click="currentTable = table.verfiyConfirmFlag"
      >
        {{ table.verifyConfirmName }}
        <template v-if="table.result">
          ({{ table.result === "pass" ? "已确定" : "已取消" }})
        </template>
      </el-button>
    </div>
    <TempData
      v-if="currentTable"
      :currentTable="currentTable"
      @handleResult="handleResult"
      @done="handleNext"
      @close="$emit('close')"
      :query="{}"
      mode="verify"
      :loading.sync="loading"
      :result="currentTableResult"
    />
  </basic-container>
</template>

<script>
import { fetchList, tables } from "@/api/rca/swckbankverifypayment";
import { tableOption } from "@/const/crud/rca/swckbankverifypayment";
import { dateFormat } from "@/util/date";
import { mapGetters } from "vuex";
import TempData from "./TempData";

export default {
  name: "swckbankverifypayment",
  components: {
    TempData,
  },
  data () {
    return {
      currentTable: null,
      tableOptions: [],
      loading: false,
    };
  },
  computed: {
    ...mapGetters(["permissions"]),
    currentTableName () {
      const { currentTable, tableOptions } = this;
      const table = tableOptions.find(
        (table) => table.verfiyConfirmFlag === currentTable
      );
      return table && table.verifyConfirmName;
    },
    currentTableResult () {
      const { currentTable, tableOptions } = this;
      const table = tableOptions.find(
        (table) => table.verfiyConfirmFlag === currentTable
      );
      return table && table.result;
    },
    permissionList () {
      return {
        addBtn: this.vaildData(
          this.permissions.generator_swckbankverifypayment_add,
          false
        ),
        delBtn: this.vaildData(
          this.permissions.generator_swckbankverifypayment_del,
          false
        ),
        editBtn: this.vaildData(
          this.permissions.generator_swckbankverifypayment_edit,
          false
        ),
      };
    },
  },
  created () {
    this.loadTables();
  },
  methods: {
    handleResult (result) {
      const table = this.tableOptions.find(
        (t) => t.verfiyConfirmFlag === this.currentTable
      );
      this.$set(table, "result", result);
      this.handleNext();
    },
    async loadTables () {
      const {
        data: { data },
      } = await tables.toBeConfirmed({
        importCreatorId: this.$store.getters.userInfo.userId,
        importTime: dateFormat(new Date(), "yyyy-MM-dd"),
      });
      this.tableOptions = data;
      if (data && data[0]) {
        this.currentTable = data[0].verfiyConfirmFlag;
      }
    },
    handleNext () {
      const { tableOptions } = this;
      const index = tableOptions.findIndex(
        (table) => table.verfiyConfirmFlag === this.currentTable
      );
      if (index < tableOptions.length - 1) {
        this.currentTable = tableOptions[index + 1].verfiyConfirmFlag;
      } else {
        this.$emit("done");
      }
    },
  },
};
</script>
<style scoped lang="scss">
.table-opt {
  margin-left: 0;
  margin-right: 20px;
  margin-bottom: 20px;
}
.title {
  line-height: 30px;
  border-left: 2px solid blue;
  padding: 0 20px;
  margin-bottom: 30px;
}
</style>
